<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <div
      :style="{
        width: '100%',
        border: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
      }"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item
            label="菜单类型"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-radio-group
              @change="onChangeMenuType"
              v-decorator="['menuType', { initialValue: localMenuType }]"
              :disabled="this.title == '详情' ? true : false"
            >
              <a-radio :value="0">一级菜单</a-radio>
              <a-radio :value="1">子菜单</a-radio>
              <a-radio :value="2">按钮/权限</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :label="menuLabel"
            hasFeedback
          >
            <a-input
              placeholder="请输入菜单名称"
              v-decorator="['name', validatorRules.name]"
              :readOnly="disableSubmit"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="localMenuType != 0"
            label="上级菜单"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :validate-status="validateStatus"
            :hasFeedback="true"
            :required="true"
          >
            <span slot="help">{{
              validateStatus == "error" ? "请选择上级菜单" : "&nbsp;&nbsp;"
            }}</span>
            <a-tree-select
              style="width: 100%"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              :replaceFields="{
                children: 'children',
                title: 'name',
                key: 'key',
                value: 'key',
              }"
              :treeData="treeData"
              v-model="model.parentId"
              placeholder="请选择父级菜单"
              :disabled="disableSubmit"
              @change="handleParentIdChange"
            >
            </a-tree-select>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="菜单路径"
          >
            <a-input
              placeholder="请输入菜单路径"
              v-decorator="['url', validatorRules.url]"
              :readOnly="disableSubmit"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="前端组件"
          >
            <a-input
              placeholder="请输入前端组件"
              v-decorator="['component', validatorRules.component]"
              :readOnly="disableSubmit"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="localMenuType == 0"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="默认跳转地址"
          >
            <a-input
              placeholder="请输入路由参数 redirect"
              v-decorator="['redirect', {}]"
              :readOnly="disableSubmit"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="!show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="授权标识"
          >
            <a-input
              placeholder="多个用逗号分隔, 如: user:list,user:create"
              v-decorator="[
                'perms',
                { rules: [{ required: false, message: '请输入授权标识!' }] },
              ]"
              :readOnly="disableSubmit"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="!show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="授权策略"
          >
            <a-radio-group
              v-decorator="['permsType', {}]"
              placeholder="请选择授权策略"
              :type="'radio'"
            >
              <a-radio :value="1"> 显示/访问 </a-radio>
              <!--            <a-radio :value="2">-->
              <!--              可编辑（未授权时禁用）-->
              <!--            </a-radio>-->
            </a-radio-group>
          </a-form-item>
          <!--<a-form-item
          v-show="!show"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="状态">
          <j-dict-select-tag  v-decorator="['status', {}]" placeholder="请选择状态" :type="'radio'" :triggerChange="true" dictCode="valid_status"/>

        </a-form-item> -->

          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="菜单图标"
          >
            <a-input
              placeholder="点击选择图标"
              v-model="model.icon"
              :readOnly="disableSubmit"
            >
              <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
            </a-input>
          </a-form-item>

          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="排序"
          >
            <a-input-number
              placeholder="请输入菜单排序"
              style="width: 200px"
              v-decorator="['sort', validatorRules.sort]"
              :readOnly="disableSubmit"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否路由菜单"
          >
            <a-switch
              checkedChildren="是"
              unCheckedChildren="否"
              v-model="routeSwitch"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="隐藏路由"
          >
            <a-switch
              checkedChildren="是"
              unCheckedChildren="否"
              v-model="menuHidden"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否缓存路由"
          >
            <a-switch
              checkedChildren="是"
              unCheckedChildren="否"
              v-model="isKeepalive"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="聚合路由"
          >
            <a-switch
              checkedChildren="是"
              unCheckedChildren="否"
              v-model="alwaysShow"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>

          <!--update_begin author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
          <a-form-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="打开方式"
          >
            <a-switch
              checkedChildren="外部"
              unCheckedChildren="内部"
              v-model="internalOrExternal"
              :disabled="this.title == '详情' ? true : false"
            />
          </a-form-item>
          <!--update_end author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
        </a-form>

        <!-- 选择图标 -->
        <icons
          @choose="handleIconChoose"
          @close="handleIconCancel"
          :iconChooseVisible="iconChooseVisible"
        ></icons>
      </a-spin>
      <a-row :style="{ textAlign: 'right' }">
        <a-button
          @click="handleEdit"
          type="primary"
          :loading="confirmLoading"
          v-if="!disabledEditValue && disabledAddValue"
          >编辑</a-button
        >
        <a-button  @click="handleOk" type="primary"   v-if="disabledEditValue && !disabledAddValue"
          >提交</a-button
        >
        <a-button :style="{ marginLeft: '8px' }" @click="handleCancel">
          取消
        </a-button>
     
      </a-row>
    </div>

  </a-drawer>
</template>

<script>
import { addPermission, editPermission, queryTreeList } from "@/api/api";
import Icons from "./icon/Icons";
import pick from "lodash.pick";

export default {
  name: "PermissionModal",
  components: { Icons },
  data() {
    return {
      drawerWidth: 700,
      treeData: [],
      treeValue: "0-0-4",
      title: "操作",
      visible: false,
      disableSubmit: false,
      model: {},
      localMenuType: 0,
      alwaysShow: false, //表单元素-聚合路由
      menuHidden: false, //表单元素-隐藏路由
      routeSwitch: true, //是否路由菜单
      /*update_begin author:wuxianquan date:20190908 for:定义变量，初始值代表内部打开*/
      internalOrExternal: false, //菜单打开方式
      /*update_end author:wuxianquan date:20190908 for:定义变量，初始值代表内部打开*/
      isKeepalive: true, //是否缓存路由
      show: true, //根据菜单类型，动态显示隐藏表单元素
      menuLabel: "菜单名称",
      isRequrie: true, // 是否需要验证
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),

      iconChooseVisible: false,
      validateStatus: "",
    };
  },
  computed: {
    validatorRules: function () {
      return {
        name: { rules: [{ required: true, message: "请输入菜单标题!" }] },
        component: {
          rules: [{ required: this.show, message: "请输入前端组件!" }],
        },
        url: { rules: [{ required: this.show, message: "请输入菜单路径!" }] },
        permsType: { rules: [{ required: true, message: "请输入授权策略!" }] },
        sort: { initialValue: 1.0 },
      };
    },
  },
  created() {
    this.initDictConfig();
  },
  methods: {
    // 编辑
    handleEdit() {
      this.title = "编辑";
      this.disabledEditValue = true;
      this.disabledAddValue = false;
    },
    loadTree() {
      var that = this;
      queryTreeList().then((res) => {
        if (res.code == "00000") {
          console.log("----queryTreeList---");
          console.log(res);
          that.treeData = [];
          let treeList = res.data;
          for (let a = 0; a < treeList.length; a++) {
            let temp = treeList[a];
            temp.isLeaf = temp.leaf;
            that.treeData.push(temp);
          }
        }
      });
    },
    add() {
      // 默认值
      this.edit({ status: "1", permsType: "1", routeFlag: true });
    },
    edit(record) {
      this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.form.resetFields();
      record.permId = record.id;
      this.model = Object.assign({}, record);
      //--------------------------------------------------------------------------------------------------
      //根据菜单类型，动态展示页面字段
      console.log(record);
      this.alwaysShow = !record.alwaysShow ? false : true;
      this.menuHidden = !record.hiddenFlag ? false : true;

      if (record.routeFlag != null) {
        this.routeSwitch = record.routeFlag ? true : false;
      }

      if (record.keepAlive != null) {
        this.isKeepalive = record.keepAlive ? true : false;
      } else {
        this.isKeepalive = false; // 升级兼容 如果没有（后台没有传过来、或者是新建）默认为false
      }

      /*update_begin author:wuxianquan date:20190908 for:编辑初始化数据*/
      if (record.internalOrExternal != null) {
        this.internalOrExternal = record.internalOrExternal;
      } else {
        this.internalOrExternal = false;
      }
      /*update_end author:wuxianquan date:20190908 for:编辑初始化数据*/

      //console.log('record.menuType', record.menuType);
      this.show = record.menuType == 2 ? false : true;
      this.menuLabel = record.menuType == 2 ? "按钮/权限" : "菜单名称";
      if (this.model.parentId && this.model.parentId != "null") {
        this.localMenuType = 1;
      } else {
        this.localMenuType = 0;
      }
      //----------------------------------------------------------------------------------------------

      this.visible = true;
      this.loadTree();
      let fieldsVal = pick(
        this.model,
        "name",
        "perms",
        "permsType",
        "component",
        "url",
        "sort",
        "menuType",
        "status"
      );
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldsVal);
      });
    },
    close() {
      this.$emit("close");
      this.disableSubmit = false;
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.model.alwaysShowFlag = this.alwaysShow;
          this.model.hiddenFlag = this.menuHidden;
          this.model.routeFlag = this.routeSwitch;
          this.model.keepAliveFlag = this.isKeepalive;
          /*update_begin author:wuxianquan date:20190908 for:获取值*/
          this.model.internalOrExternal = this.internalOrExternal;
          /*update_end author:wuxianquan date:20190908 for:获取值*/
          let formData = Object.assign(this.model, values);
          if (
            (formData.menuType == 1 || formData.menuType == 2) &&
            !formData.parentId
          ) {
            that.validateStatus = "error";
            that.$message.error("请检查你填的类型以及信息是否正确！");
            return;
          } else {
            that.validateStatus = "success";
          }
          that.confirmLoading = true;
          console.log(formData);
          let obj;
          if (!this.model.id) {
            obj = addPermission(formData);
          } else {
            obj = editPermission(formData);
          }
          obj
            .then((res) => {
              if (res.code == "00000") {
                that.$message.success("操作成功");
                that.$emit("ok");
              } else {
                that.$message.warning("操作失败" + res.msg);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        }
      });
    },
    handleCancel() {
      this.close();
    },
    validateNumber(rule, value, callback) {
      if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
        callback();
      } else {
        callback("请输入正整数!");
      }
    },
    onChangeMenuType(e) {
      //console.log('localMenuType checked', e.target.value)
      this.localMenuType = e.target.value;
      if (e.target.value == 2) {
        this.show = false;
        this.menuLabel = "按钮/权限";
      } else {
        this.show = true;
        this.menuLabel = "菜单名称";
      }
      this.$nextTick(() => {
        this.form.validateFields(["url", "component"], { force: true });
      });
    },
    selectIcons() {
      // this.iconChooseVisible = true
      // 详情判断
      if (this.title == "详情") {
        this.iconChooseVisible = false;
      } else {
        this.iconChooseVisible = true;
      }
    },
    handleIconCancel() {
      this.iconChooseVisible = false;
    },
    handleIconChoose(value) {
      console.log(value);
      this.model.icon = value;
      this.form.icon = value;
      this.iconChooseVisible = false;
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    initDictConfig() {},
    handleParentIdChange(value) {
      console.log(value);
      if (!value) {
        this.validateStatus = "error";
      } else {
        this.validateStatus = "success";
      }
    },
  },
};
</script>

<style scoped>
</style>